<template>
  <a-modal
    v-model:visible="visible"
    :mask-closable="false"
    width="70vw"
    :title="'暂估选择'"
    :title-align="'start'"
    :hide-cancel="true"
    :closable="false"
    @ok="handleChooseOk"
  >
    <div style="height: 70vh">
      <query-form
        ref="queryForms"
        :component-config="formComponentConfig"
        :render-config="formRenderConfig"
        :render-keys="renderKeys"
        @search="searchHandle"
        @reset="resetHandle"
      />
      <table-container
        v-model:columns="columns"
        v-model:is-fullscreen="isFullscreen"
        :loading="isLoading"
        :all-columns="allColumns"
        @refresh="getData"
      >
        <a-table
          :columns="columns"
          :data="renderData"
          :loading="isLoading"
          row-key="id"
          :scroll="scroll"
          table-layout-fixed
          :row-selection="rowSelection"
        >
        </a-table>
      </table-container>
    </div>
  </a-modal>
</template>

<!--新script-->
<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import tableContainer from '@/common/components/table-container/index.vue';
  import queryForm from '@/common/components/query-form/index.vue';
  import { sleep } from '@/utils/tools';
  import lodash from 'lodash';
  import choose from '../table-comp/choose';
  import {
    formRenderConfig,
    formComponentConfig,
  } from '../form-comp/choose-module-form';

  const renderKeys = ref<any>([]);
  renderKeys.value = [
    'name1',
    'name2',
    'name3',
    'name4',
    'name5',
    'name6',
    'name7',
  ];
  const isLoading = ref(true);
  const scroll = {
    x: 2000,
    y: 200,
  };
  const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
  });
  const renderData = ref<any[]>([]);
  const columns = ref([]);
  columns.value = choose;
  const getData = async () => {
    renderData.value = [];
    isLoading.value = true;
    await sleep(2000);
    const data = reactive([
      {
        email: '1',
        id: '1',
        address: '32 Park Road, London',
      },
      {
        salary: 'Alisa Ross',
        id: '2',
      },
    ]);
    renderData.value = data;
    isLoading.value = false;
  };
  getData();
  const visible = ref(true);
  const allColumns = lodash.cloneDeep(columns);
  const emit = defineEmits(['handleChooseOk']);
  const handleChooseOk = () => {
    emit('handleChooseOk');
  };
</script>
